<template>
  <span>
    <el-date-picker
      :default-time="['00:00:00','00:00:00']"
      :picker-options="pickerOption"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="yyyy-MM-dd"
      @change="onChangeTime"
      v-model="defaultDate"
      range-separator=":"
      :clearable="false"
      class="date-item"
      type="daterange"
      ref="datePicker"
      size="small"
    />
  </span>
</template>

<script>
const pickerOption = {
  default: {
    onPick({ minDate, maxDate }) {
      pickerOption.startDate = minDate
      if (maxDate) {
        pickerOption.startDate = null
      }
    },
    disabledDate(date) {
      let curTime = date.getTime();
      // 7天之前
      if(pickerOption.type === 1) {
        let time = Date.now() - 3600 * 1000 * 24 * 7;
        if(curTime > time) {
          return true;
        }
      }

      // 7天之内
      if(pickerOption.type === 0) {
        let minTime = Date.now() - 3600 * 1000 * 24 * 7;
        let maxTime = Date.now();
        if(curTime < minTime || curTime > maxTime) {
          return true;
        }
      }

      if (pickerOption.startDate === null) {
        return false;
      }
      let startTime = pickerOption.startDate.getTime()
      let maxTime = startTime + 3600 * 1000 * 24 * 30;
      let minTime = startTime - 3600 * 1000 * 24 * 30;

      return curTime > maxTime || curTime < minTime;
    }
  },
  startDate: null,
  type: 0
};

export default {
  name: "datePicker",
  props: {
    value: {
      type: Array,
      default() {
        return null;
      }
    },
    // 0-实时,1-归档
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pickerOption: pickerOption.default,
      defaultDate: null,
    };
  },
  watch: {
    type() {
      pickerOption.type = this.type;
      this.resetForm();
    },
    value() {
      this.updateTime(this.value);
      if(this.value === null) {
        this.resetForm();
      }
    }
  },
  mounted() {
    pickerOption.type = this.type;
    if(this.value) {
      this.defaultDate = this.value;
    } else {
      if(!this.$parent.query || !this.$parent.query.startTime && !this.$parent.query.endTime) {
        this.resetForm();
      }
    }
  },
  methods: {
    onChangeTime() {
      // console.log("............... ", this.defaultDate);
      this.$emit("input", this.defaultDate);
      this.$emit("change", this.defaultDate);
    },
    resetForm() {
      let date = new Date();
      if(this.type === 1) {
        date = new Date(Date.now() - 3600 * 1000 * 24 * 7);
      }
      this.updateTime([
        this._dateToString(date),
        this._dateToString(date)
      ]);
    },
    updateTime(e) {
      if(!this._equals(e, this.defaultDate)) {
        this.defaultDate = e;
        this.onChangeTime();
      }
    },
    _dateToString(date) {
      return date.getFullYear() + "-" + (date.getMonth()> 8 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1)) + "-" +(date.getDate() > 8 ? (date.getDate()) : "0" + (date.getDate()));
    },
    // 判断两个时间范围是否一致
    _equals(date1, date2) {
      if(date1 === date2) {
        return true;
      }
      if(!date1 || !date2) {
        return false;
      }
      if(date1[0] == date2[0] && date1[1] == date2[1]) {
        return true;
      }
    }
  }
}
</script>